<template>
  <div
      ref="oneFileOrDir"
      class="one-file-or-dir"
  >
    <el-space :class="typeData === 'folder' ? 'folder-icon-wrap' : 'underline'">
      <component :is="fileType(typeData)"></component>
    </el-space>
    <el-tooltip :hide-after="100" :disabled="isShowTooltip">
      <template #content>
        <span>{{ fileNameData }}</span>
      </template>
      <div @mouseover="onMouseOver" class="file-or-dir-wrap" ref="filename">{{ fileNameData }}</div>&nbsp;
    </el-tooltip>
  </div>
</template>
<script>
import {ref} from 'vue'
import ArrowDownload from '@/components/common/ArrowDownload'
import MoveToIcon from '@/components/common/MoveToIcon'
import EditIcon from '@/components/common/EditIcon'
import StarIcon from '@/components/common/StarIcon'
import {computed} from "@vue/reactivity"
import FolderIcon from '@/components/document/FolderIcon.vue'
import ExcelIcon from '@/components/document/ExcelIcon.vue'
import WordIcon from '@/components/document/WordIcon.vue'
import PptIcon from '@/components/document/PptIcon.vue'
import UnknownIcon from '@/components/document/UnknownIcon.vue'
import PdfIcon from '@/components/document/PdfIcon.vue'
import JpgIcon from '@/components/document/JpgIcon.vue'
import Mp4Icon from '@/components/document/Mp4Icon.vue'
import DateFormatPipe from "../../utils/dateFormat.js";
import UploadFile from "../common/UploadFile";
import TxtIcon from "@/components/document/TxtIcon";
import XmindIcon from "@/components/document/XmindIcon";
import MdIcon from "@/components/document/MdIcon";
import HexIcon from "@/components/document/HexIcon";

export default {
  components: {
    ArrowDownload,
    MoveToIcon,
    EditIcon,
    StarIcon,
    ExcelIcon,
    WordIcon,
    PptIcon,
    UnknownIcon,
    PdfIcon,
    FolderIcon,
    UploadFile,
    JpgIcon,
    TxtIcon,
    XmindIcon,
    MdIcon,
    HexIcon,
    Mp4Icon
  },
  props: {
    cType: String,
    fileName: String,
    documentId: Number,
    date: String,
  },
  setup(props) {
    const typeData = ref(props.cType || 'folder')
    const fileNameData = ref(props.fileName)
    const authorData = ref(props.author)
    const dateData = ref(props.date)
    const catalogueMaxWidth = ref("250px")
    const filename = ref(null)
    const isShowTooltip = ref(true)

    const onMouseOver = () => {
      let parentWidth = filename.value.parentNode.offsetWidth;
      let contentWidth = filename.value.offsetWidth;
      isShowTooltip.value = contentWidth <= parentWidth;
    }

    const fileType = computed(() => {
      return (type) => {
        const typeMap = {
          'doc': 'WordIcon',
          'docx': 'WordIcon',
          'ppt': 'PptIcon',
          'pptx': 'PptIcon',
          'pdf': 'PdfIcon',
          'xls': 'ExcelIcon',
          'xlsx': 'ExcelIcon',
          'folder': 'FolderIcon',
          'jpg': 'JpgIcon',
          'png': 'JpgIcon',
          'jpeg': 'JpgIcon',
          'xmind': 'XmindIcon',
          'md': 'MdIcon',
          'txt': 'TxtIcon',
          'hex': 'HexIcon',
          'mp4': 'Mp4Icon'
        }
        return typeMap[type.toLowerCase()] || 'UnknownIcon'
      }
    })

    const type = ref([])

    return {
      typeData,
      fileNameData,
      authorData,
      dateData,
      type,
      onMouseOver,
      fileType,
      filename,
      isShowTooltip,
      catalogueMaxWidth,
      DateFormatPipe
    }
  }
}
</script>
<style scoped lang="scss">
.one-file-or-dir {
  display: flex;
  flex: 1;
  align-items: center;
  position: relative;
  z-index: 1;
  max-width: v-bind(catalogueMaxWidth);
}

.one-file-or-dir-hover {
  flex: 1;
  align-items: center;
  display: none;
  margin-right: 8px;
  max-width: v-bind(catalogueMaxWidth);
}

.file-or-dir-wrap {
  font-size: 1.7rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-right: 1rem;
  margin-left: 0.5rem;
}

.author {
  width: 10rem;
  font-weight: 400;
  color: #727B84;
  font-size: 1.6rem;
  margin-left: 2.4rem;
  white-space: nowrap;
}

:deep(.el-space__item) svg {
  width: 2.6rem !important;
  height: 2.6rem !important;
}


.date {
  width: 13rem;
  font-weight: 400;
  color: #727B84;
  white-space: nowrap;
}

.editor-wrap {
  height: 100%;
  display: flex;
  position: absolute;
  right: 1.2rem;
  align-items: center;
}

.more {
  margin-right: 1.2rem;
  height: 0.4rem;
}

.share {
  margin-right: 1.2rem;
  height: 1.7rem;
}

.new {
  height: 2.2rem;
}

:deep(.el-popper__arrow) {
  display: none;
}

.delete-icon {
  width: 2rem;
}

.folder-icon-wrap {
  color: #fbc86a;
}


.underline:before {
  content: " ";
  white-space: pre;
}
</style>
